<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <script src="../lib/js/jquery-1.10.1.min.js"></script>
    <script src="../lib/swiper/js/swiper.min.js"></script>
    <script src="../lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="../lib/layui/layui.js"></script>
    <script src="../ajax/request.js"></script>
    <script src="../utils/cookie.js"></script>
    <script src="../utils/common.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../styles/css/index.css">
    <style>
    .detail{text-align: center;}
    .wrapper{
        display:flex;
        width:900px;
        margin:10px auto;
    }
    .wrapper .item {
        width:50%;
        height:570px;
    }
    
    .bigbox,  .showimg {
        width:100%;
        height:450px;
    }
    .smallimglist{
        display: flex;
    }
    .smallimglist li{
        width:58px;
        height:58px;
        margin:5px;
    }
    .smallimglist li img{
        width:58px;
        height:58px;
    }
    </style>
</head>
<body>
    <div class="page detail">
        <div class="w wrapper">
            <div class="left item">
                <div class="imgbox">
                    <div class="bigbox">
                        <img class="showimg" src="" alt="">
                    </div>
                    <ul class="smallimglist">
                    </ul>
                </div>
            </div>
            <div class="right item">
            </div>
        </div>
    </div>


    <script>
        

        $(function(){
            var odiv = document.createElement("div");
            $(odiv).attr("id",'head').load("../tpls/head.html",function(){}).prependTo($('body'));
            var odiv1 = document.createElement("div");
            $(odiv1).attr("id",'foot').load("../tpls/foot.html",function(){}).appendTo($('body'));

            var url = urlParse()
            console.log(url)

            $("title").text(url.goodsName);

            

            var left =  document.getElementsByClassName('left')[0];
            var right =  document.getElementsByClassName('right')[0];
            var showimg =  document.getElementsByClassName('showimg')[0];
            var smallimglist =  document.getElementsByClassName('smallimglist')[0];

            

            loadOneDetail();
            async function loadOneDetail(){
                let res= await getGoodOneDetail({gid:url.goodsId})
                // function changeBigImg(src){
                //     $(".showimg").attr("src",src);
                // }
                // onclick="changeBigImg('${result.bigPicList[i]}')"
                
                // 给未来元素绑定事件用事件委托 
                $(".smallimglist").on("click","li",function(){
                    var src = $(this).find("img").attr("data-src");
                    console.log(src);
                    $(".showimg").attr("src",src);
                })


                const {status,detail,result} = res;
                if(status){
                    // 左边的图片result
                    showimg.src = result.goodsImg;   //大图片修改 路径 
                    
                    var html = "";
                    var len = result.smallPicList.length>6  ? 6 :   result.smallPicList.length ;  // 最多6张小图片 
                    for(var i=0;i<len;i++){
                        html += `<li class="imgli" >
                                <img   class="simg" data-src="${result.bigPicList[i]}" src="${result.smallPicList[i]}"/>
                            </li>`
                    }
                    smallimglist.innerHTML = html;
                    // 右边
                    right.innerHTML = `
                    <div class="goodsinfo">
                        <div class="sku-name">
                            ${result.goodsName}
                        </div>
                        <div class="summary">
                            京东价: <span> ￥ ${result.goodsPrice}</span> 降价通知 
                        </div>
                        <div class="warp-input">
                            <button class="descbtn">减1</button>
                            <input type="number" value="1" class="mynum" >
                            <button class="addbtn">加1</button>
                        </div>
                        <div class="buy">
                            <button class="addtocart" >加入购物车</button>
                            <button class="gotomycart" >进入我的购物车</button>
                            <p>
                                <button class="shougood" >收藏商品</button>
                                <button class="likegood" >点赞商品</button>    
                            </p>
                        </div>
                    </div>
                    `
                    var mynum = document.getElementsByClassName('mynum')[0]; 
                    var descbtn = document.getElementsByClassName('descbtn')[0]; 
                    var addbtn = document.getElementsByClassName('addbtn')[0]; 
                    var gotomycart = document.getElementsByClassName('gotomycart')[0]; 


                   

                    // 进入购物车
                    gotomycart.onclick = function(){
                        var user = getCookie("useraccount"); 
                        if(user){
                            location.href = "./cart.html"
                        }else{
                            layer.alert('你还未登录,请先登录', {
                                    skin: 'layui-layer-molv' //样式类名
                                    ,closeBtn: 0
                                }, function(){
                                location.href="./login.html?from=gooddetail";
                            });
                            
                        }
                    }
                    
                    descbtn.onclick = function(){
                        console.log(mynum.value)
                        if(mynum.value<=1) return false;
                        mynum.value = mynum.value * 1 - 1;
                    }

                    addbtn.onclick = function(){
                        console.log(mynum.value)
                        mynum.value = mynum.value * 1  +1;
                    }

                    mynum.onchange = function(e){
                        console.log(e.target.value)
                    }
                    // 异步数据 函数无法获取
                    // function mynumdesc(){
                    //     if(mynum.value<=1) return false;
                    //     mynum.value = mynum.value - 1;
                    // }
                    // function mynumadd(){
                    //     mynum.value = mynum.value + 1;
                    // }

                    var addtocart = document.getElementsByClassName('addtocart')[0];  // 开始的时候不存在 
                    
                    // 加入购物车 
                    // 谁   (账号)  user  
                    // 买了什么东西   (商品ID  商品信息 )  goodId
                    // 买了多少件商品  (value)  buynum 

                    // 谁买的  cookie  loginAccount 用户 
                    
                    // 加入购物车之前 判断用户是否登录
                    // user 存在就已经登录状态 => 加入购物车
                    // 没有user 没有登录  => 提示登录 
                    addtocart.onclick = async function(){
                        console.log('准备加入购物车了...')
                        var user = getCookie("useraccount"); 
                        if(user){
                            // 插入数据 
                            // $.ajax({
                            //     type:"get",
                            //     url:"../good/07_addToCart.php",
                            //     dataType:"json",
                            //     data:{  //动态 
                            //         user:user,
                            //         buynum:mynum.value,
                            //         goodId:url.goodsId
                            //     },
                            //     success:res=>{
                            //         console.log(res)
                            //         alert(res.detail)
                            //     }
                            // })
                            let res = await addToShopcart({
                                user:user,
                                buynum:mynum.value,
                                goodId:url.goodsId
                            })

                            let {status} = res;
                            if(status){
                                layer.msg("加入购物车成功...")
                            }
                        }else{
                            // 问题 1
                            // 详情页 - 登录 - 列表 - 详情

                            // 详情 -  登录  - 详情  (期待 从哪里来登录成功就返回到哪里去 )  
                            // alert("你还未登录,请先登录再来购买")
                            // location.href="./login_account.html?from=gooddetail";
                            layer.alert('你还未登录,请先登录', {
                                    skin: 'layui-layer-molv' //样式类名
                                    ,closeBtn: 0
                                }, function(){
                                location.href="./login.html?from=gooddetail";
                            });
                        }
                    }
                }
            }
        })
    </script>

</body>
</html>